<template>
	<el-container class="main-container">
		<el-aside :class="mainAsideClass">
			<LeftNav></LeftNav>
		</el-aside>
		<el-container>
			<el-header class="main-header">
				<TopNav></TopNav>
			</el-header>
			<el-main class="main-center">
        <router-view></router-view>
      </el-main>
		</el-container>
	</el-container>
</template>

<script>
	// 导入组件
	import TopNav from '@/components/TopNav'
	import LeftNav from '@/components/LeftNav'

	// 导出模块
	export default {
		name: 'AppMain',
    data() {
      return {
        msg: '',
        mainAsideClass: 'main-aside'
      }
    },
    components: {
      TopNav,
      LeftNav
    },
    beforeCreate: function() {
      this.$root.$on('aside-toggle', (collapsed) => {
        if(true === collapsed) {
          setTimeout(() => {
            this.mainAsideClass = 'main-aside-collapsed';
          },200);
        }else {
          this.mainAsideClass = 'main-aside';
        }
      });
    }
	}
</script>
<style>
	.main-container {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.main-aside-collapsed {
		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
		width: 64px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-aside {
		width: 240px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-header{
		padding: 0px;
		/* border-left: 2px solid #333; */
	}

	.main-center {
		padding: 20px;
		/* border-left: 2px solid #333; */
	}
</style>
